<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <style>
      body {
        font-size: 18px;
      }

      .find {
        width: 604px;
        height: 90px;
        margin: 0 auto;
      }

      .find input {
        margin-top: 10px;
        width: 600px;
        height: 40px;
        border: 2px solid #eebbbb;
        border-radius: 25px;
      }

      #BOX {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        font-size: 12px;
      }

      #boxs {
        width: 185px;
        border: 1px solid #eac2c2;
        border-radius: 6px;
      }

      #boxs p {
        padding-left: 10px;
      }

      #boxs img {
        width: 167px;
        height: 150px;
        margin: 4% 5%;
        border-radius: 7px;
      }

      #boxs button {
        margin: 0 18% 4%;
        background-color: #eac2c2;
        border: none;
        height: 35px;
        width: 120px;
        border-radius: 5px;
        font-family: "宋体";
        color: aliceblue;
      }

      .form-content {
        width: 1200px;
        margin: 0 auto;
      }

      .content {
        width: 1200px;
        margin: 0 auto;
        margin-bottom: 70px;
      }

      .goods-content {
        line-height: 60px;
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
      }

      .goods-content div {
        display: inline-block;
        margin-bottom: 1px;
        font-size: 15px;
      }

      .goods-select {
        width: 3%;
        text-align: center;
      }

      .goods-id {
        width: 20%;
        text-align: center;
      }

      .goods-id img {
        width: 100px;
        margin-top: 18px;
      }

      .goods-name {
        width: 37%;
      }

      .goods-price {
        width: 10%;
        text-align: center;
      }

      .goods-number {
        width: 20%;
        text-align: center;
      }

      .goods-opt {
        width: 10%;
        text-align: center;
      }

      .goods-opt button {
        width: 60px;
        height: 30px;
      }

      .goods-content input {
        height: 20px;
        width: 16px;
      }

      .total {
        background: #eac2c2;
        width: 1200px;
        text-align: right;
        margin: 0 auto;
        margin-top: 30px;
        position: fixed;
        bottom: 0;
      }

      #bl {
        width: 1200px;
        margin: 0 auto;
        text-align: center;
        font-size: 30px;
        font-family: "宋体";
        color: #ccc;
      }

      #AllSelect {
        background: #eac2c2;
        width: 1200px;
        margin: 0 auto;
        height: 50px;
        position: fixed;
        bottom: 20px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="find">
        <input
          type="text"
          placeholder="请输入您要查询的物品"
          id="n"
          v-model="find"
        />
      </div>
      <div class="form-content">
        <div id="BOX">
          <div id="boxs" v-for="(i,id) in finishs" :key="i.id">
            <img :src="i.imgSrc" />
            <p>&nbsp;商品名称：{{i.name}}</p>
            <p>&nbsp;商品价格：{{i.price}}元</p>
            <button type="button" @click="insert(i)">添加至购物车</button>
          </div>
        </div>
      </div>
      <div class="content">
        <h3>购物车</h3>
        <div class="goods-content" style="background-color: #ebcaca">
          <div class="goods-select">选择</div>
          <div class="goods-id">编号</div>
          <div class="goods-name">商品名称</div>
          <div class="goods-price">单价</div>
          <div class="goods-number">数量</div>
          <div class="goods-opt">操作</div>
        </div>
        <goods
          v-for="(goods,index) in goodsList"
          :key="goods.id"
          :goods="goods"
          :index="index"
          @todel="del"
          @toupdate="update"
        >
        </goods>
        <div id="bl">您的购物车内暂无商品，快去选购吧</div>
        <div id="AllSelect">
          <input type="checkbox" v-model="allCheck" />全选
        </div>
        <div class="total">总价：￥{{total}}元</div>
      </div>
    </div>
  </body>
  <template id="goods">
    <div
      class="goods-content"
      :style="{backgroundColor:(index%2==0?'':'#E2DFDF')}"
    >
      <div class="goods-select">
        <input type="checkbox" v-model="goods.select" />
      </div>
      <div class="goods-id">
        <img :src="goods.imgSrc" />
      </div>
      <div class="goods-name">{{goods.name}}</div>
      <div class="goods-price">{{goods.price}}</div>
      <div class="goods-number">
        <button
          @click="reduce(index)"
          style="background-color: #ebcaca; border: #eebbbb"
        >
          -
        </button>
        <input type="text" v-model="goods.number" style="border: none" />
        <button
          @click="add(index)"
          style="background-color: #ebcaca; border: #eebbbb"
        >
          +
        </button>
      </div>
      <div class="goods-opt">
        <button
          @click="del(index)"
          style="background-color: #ebcaca; border: #eebbbb"
        >
          删除
        </button>
      </div>
    </div>
  </template>
  <script type="text/javascript">
    Vue.component("goods", {
      template: "#goods",
      props: ["goods", "index"],
      methods: {
        add(index) {
          this.goods.number++;
          this.$emit("toupdate", index, this.goods.number);
        },
        reduce(index) {
          if (this.goods.number > 0) {
            this.goods.number--;
            this.$emit("toupdate", index, this.goods.number);
          } else {
            alert("数量不能再少了");
          }
        },
        del(index) {
          this.$emit("todel", index);
        },
      },
    });
    var vm = new Vue({
      el: "#app",
      data: {
        goodsList: [],
        BoxImg: [
          {
            select: true,
            id: 1,
            imgSrc: "img/1.jpg",
            price: "8",
            name: "小毛球袜子黑色",
            number: "1",
          },
          {
            select: true,
            id: 2,
            imgSrc: "img/2.jpg",
            price: "8",
            name: "小毛球袜子紫色",
            number: "1",
          },
          {
            select: true,
            id: 3,
            imgSrc: "img/3.jpg",
            price: "8",
            name: "小毛球袜子玫红色",
            number: "1",
          },
        ],
        find: "",
      },
      methods: {
        insert(i) {
          if (this.goodsList == "") {
            this.goodsList.push(i);
          } else {
            if (this.goodsList.includes(i)) {
              var index = this.goodsList.indexOf(i);
              this.goodsList[index].number++;
            } else {
              this.goodsList.push(i);
            }
          }
        },
        update(index, number) {
          this.goodsList[index].number = number;
        },
        del(index) {
          this.goodsList.splice(index, 1);
        },
      },
      computed: {
        allCheck: {
          get() {
            if (this.goodsList.length == 0) {
              select = false;
            } else {
              return this.goodsList.every((i) => i.select);
            }
          },
          set(val) {
            this.goodsList.forEach((Element) => {
              Element.select = val;
            });
          },
        },
        total() {
          var money = 0;
          for (var i = 0; i < this.goodsList.length; i++) {
            if (this.goodsList[i].select == true) {
              money +=
                parseFloat(this.goodsList[i].price) *
                parseFloat(this.goodsList[i].number);
            }
          }
          return money;
        },
        finishs() {
          return this.BoxImg.filter((item) => {
            return item.name.indexOf(this.find) !== -1;
          });
        },
      },
      watch: {
        goodsList() {
          if (this.goodsList.length !== 0) {
            document.getElementById("bl").style.display = "none";
          } else {
            document.getElementById("bl").style.display = "block";
          }
        },
      },
    });
  </script>
</html>
